<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <div *ngFor="let card of cards; trackBy: trackByIndex" class="h-[400px]">
        <div class="flex shrink-0">
            <span>{{card.title}}</span>
            <span *ngIf="card.slicer">{{card.slicer | slicer}}<mat-icon class="cursor-pointer ngm-density__compact" (click)="card.slicer = {members: []}">close</mat-icon></span>
            <span *ngIf="card.slicers">{{card.slicers | slicer}}<mat-icon class="cursor-pointer ngm-density__compact" (click)="card.slicers = []">close</mat-icon></span>
        </div>
        <ngm-member-list *ngIf="card.type === 'MemberList'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [ngModel]="card.slicer"
            (ngModelChange)="card.slicer=$event;onSlicerChange($event)"
        >
        </ngm-member-list>
        
        <!-- <ngm-smart-filter *ngIf="card.type === 'SmartFilter'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event)"
        ></ngm-smart-filter> -->

        <ngm-member-tree *ngIf="card.type === 'MemberTree'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event)"
        >
        </ngm-member-tree>

        <ngm-member-table *ngIf="card.type === 'MemberTable'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event)">
        </ngm-member-table>

        <ngm-tree-select *ngIf="card.type === 'TreeSelect'" class="w-full h-full"
            [treeNodes]="card.treeNodes"
            [treeViewer]="card.options.treeViewer"
            [searchable]="card.options.searchable"
            [appearance]="card.appearance"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event, card)"
        ></ngm-tree-select>
        <ngm-member-tree-select *ngIf="card.type === 'MemberTreeSelect'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [appearance]="card.appearance"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event, card)"
        ></ngm-member-tree-select>
        <ngm-smart-select *ngIf="card.type === 'SmartSelect'" class="w-full h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
            [ngModel]="slicer"
            (ngModelChange)="onSlicerChange($event)"
        ></ngm-smart-select>
        <ngm-analytical-card *ngIf="card.dataSettings?.chartAnnotation" class="w-full h-full" displayDensity="compact"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [chartSettings]="card.chartSettings"
            [chartOptions]="card.chartOptions"
            [options]="card.options"
            [slicers]="card.slicers"
            (slicersChanging)="onSlicerChange($event, card)"
            (chartClick)="onChartClick($event)"
            (chartHighlight)="onChartHighlight($event)"
            (chartContextMenu)="onChartContextMenu($event)"
            (explain)="onExplain($event)"
        >
            <div>{{card.slicers | slicer}}</div>
        </ngm-analytical-card>

        <ngm-analytical-grid *ngIf="card.dataSettings?.analytics" class="w-full h-full"
            [appearance]="{displayDensity: DisplayDensity.compact}"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [options]="card.options"
            [slicers]="card.slicers"
            [columns]="card.columns"
            (columnSelectionChanging)="onColumnSelectionChanging($event)"
            (explain)="onExplain($event)"
            >
            <div>{{card.slicers | slicer}}</div>
        </ngm-analytical-grid>
    </div>

    <div>
        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
            <mat-button-toggle value="bold">Bold</mat-button-toggle>
            <mat-button-toggle value="italic">Italic</mat-button-toggle>
            <mat-button-toggle value="underline">Underline</mat-button-toggle>
        </mat-button-toggle-group>
    </div>
      
</div>
